<template>
<div class="bar-border">
  <div class="content">
    <div class="content-active" :style="`width:${ratio || 0}%`"></div>
  </div>
</div>
</template>

<script>
export default {
  name: "pro-bar",
  props:["ratio"]
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";
.bar-border{
  width: 100%;
  height:100%;
  border: 1px solid #00feff;
  border-radius: 3000px;
  padding: px2vh(10) px2vw(10) px2vh(12);

  .content{
    width: 100%;
    height:100%;
    background: rgba(35, 86, 161);
    border-radius: 3000px;

    .content-active{
      height:100%;
      width: 60%;
      background: linear-gradient(90deg, #09FDFB 0%, #9CF4FF 100%);
      border-radius: 3000px;
      transition: all linear .3s;
    }
  }
}
</style>
